<template id="app">
    <div class="main">
        <div class="main_top">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item,id) in gslist" :label="item.name" :key="item.id" :name="item.id"  >
                    <div class="tabs_top">
                        <div class="tabs_top_le"></div>
                        <div class="tabs_top_text">追溯数据统计</div>
                    </div>
                    <div class="tabs_list">
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">种植数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in1.png" alt="" />
                                <span>{{plantNum}}kg</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">采收数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in2.png" alt="" />
                                <span>{{orderNum}}kg</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">成品数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in3.png" alt="" />
                                <span>{{ProdNum}}</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">赋码</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in4.png" alt="" />
                                <span>{{codeNum}}</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">订单数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in5.png" alt="" />
                                <span>{{reapNum}}</span>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="茂县" name="茂县">
                    <div class="tabs_top">
                        <div class="tabs_top_le"></div>
                        <div class="tabs_top_text">追溯数据统计</div>
                    </div>
                    <div class="tabs_list">
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">种植数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in1.png" alt="" />
                                <span>2000kg</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">采收数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in2.png" alt="" />
                                <span>2000kg</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">成品数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in3.png" alt="" />
                                <span>2000</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">赋码</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in4.png" alt="" />
                                <span>2000</span>
                            </div>
                        </div>
                        <div class="tabs_list_cen">
                            <div class="tabs_list_cen_tle">订单数量</div>
                            <div class="tabs_list_cen_sj">
                                <img class="tabs_list_cen_sj_img" src="./in5.png" alt="" />
                                <span>2000</span>
                            </div>
                        </div>
                    </div>
                </el-tab-pane> -->
            </el-tabs>
        </div>
        <div class="center">
            <div class="center_le">
                <div style="margin-top: 15px">
                    <el-form :model="form1" style="width: 30%" label-width="100px">
                        <el-form-item label="追溯环节:">
                            <el-select v-model="form1.resourcetype" style="width: 100%" placeholder="追溯环节">
                                <el-option label="种植" value="种植"></el-option>
                                <el-option label="采收" value="采收"></el-option>
                                <el-option label="成品" value="成品"></el-option>
                                <el-option label="赋码" value="赋码"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="main_ec_top">
                    <span style="margin-left: 25px; margin-right: 20px">
                        <el-input style="height: 40px" v-model="name" placeholder="请输入基源"></el-input
                    ></span>
                    <span style="margin-right: 20px">
                        <el-date-picker
                            v-model="Time"
                            style="height: 40px"
                            type="monthrange"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker
                    ></span>
                    <el-button size="medium" style="height: 40px;" @click="resetmode">重置</el-button>
                    <el-button size="medium" style="margin-right: 20px; height: 40px" type="primary" @click="inqu()">查询</el-button>
                </div>
                <div class="center_left">
                    <div class="center_left_top">
                        <div style="margin-left: 20px; display: flex; flex-direction: row; align-items: center">
                            <div class="tabs_top_le"></div>
                            <span style="font-size: 14px; font-weight: 700">种植/产出物/成品/赋码数量统计</span>
                        </div>
                        <el-button size="medium" @click="xiangqing" style="height: 34px; margin-right: 20px" type="primary">详情</el-button>
                    </div>
                    <div style="width: 100%; height: 100%">
                        <div id="chart_example" ref="Histogram2" style="width: 100%; height: 300px"></div>
                    </div>
                </div>
                <div class="center_le_bon">
                    <div class="right_top">
                        <div class="right_top_text">
                            <div class="tabs_top_le"></div>
                            <span style="font-size: 14px; font-weight: 700"> 生产数据统计</span>
                        </div>
<!--                        <div class="top_dit">-->
<!--                            <div class="right_top_dit" @click="zhongzi(1)" :class="{ selectedColor: xzid == 1 }">种植数据</div>-->
<!--                            <div class="right_top_dit" @click="guob(2)" :class="{ selectedColor: xzid == 2 }">采收数据</div>-->
<!--                            <div class="right_top_dit" @click="shengb(3)" :class="{ selectedColor: xzid == 3 }">加工数据</div>-->
<!--                        </div>-->
                    </div>
                    <div style="width: 100%; height: 100%">
                        <div id="chart_ex" ref="Histogram" style="width: 100%; height: 300px"></div>
                    </div>
                </div>
            </div>
            <div class="center_rig">
                 <el-tabs v-model="activeName1" @tab-click="handleClick1">
                <el-tab-pane label="基地" name="基地">
                     <div class="center_rig_map">
<div id="mapDiv" class="mapDiv"></div>
 <div class="left">
            <enterprise-list :enterpriseData="enterpriseLists" @change="changeOne" v-if="leftFlag == true"></enterprise-list>
        </div>
                     </div>
                <div class="center_rig_bon">
                        <el-table :data="equipmentList" style="width: 100%" ref="scroll_table" height="270px" class="scroll_table">
       <el-table-column prop="principalName" label="设备名称"    align="center"
              header-align="center">
       </el-table-column>
       <el-table-column prop="type" label="设备类型" show-overflow-tooltip    align="center"
              header-align="center" >
       </el-table-column>
       <el-table-column prop="serial" label="设备序列号"    align="center"
              header-align="center">
       </el-table-column>
<!--        <el-table-column  label="厂商" prop="" align="center"-->
<!--              header-align="center">-->
<!--       </el-table-column>-->
</el-table>
                </div>
                </el-tab-pane>
            </el-tabs>

            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import "./jquery.min.js"
import axios from 'axios'
import BaiduMap from '../../../common/js'
import enterpriseList from './enterpriseList.vue';
import {getplantcomp} from "../../../../request/api";

export default {
    data() {
        return {
          typelist:[],
            activeName:'',
            activeName1:'基地',
            gslist:[{name:'茂县',id:1}],
            jidilist:'',
            name: '',
            Time: [],
            form1: {
                resourcetype:'种植'
            },
            timms: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            nums: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356],
            xzid: '1',
            plantNum:'',
            orderNum:'',
            ProdNum:'',
            codeNum:'',
            reapNum:'',
            historyQxId: '',
            meteorologicalDatas: [],
            startTime: '',
            endTime: '',
            value1: [],
            titleName: '',
            treeData: [],
            treeDataX: [],
            flag: 1,
            equipmentList: [],
            qixiangDataid: {},
            qixiangDataids: {},
            equipmentDataAxios: [],
            videoFlag: false,
            leftFlag: true,
            meteorologicalFlag: false,
            enterpriseLists: [],
            productionMassifData: [],
            productionMassifDatas: [],
            dkDAta: [],
            allData: [],
            nongshiDatas:'',
            caishouDatas:[],
            principalId:'',
            peasantId:'',
            soilImg:'',
            // name:'',
            area:'',
            lnglat:[{
                lng:'',
                lat:''
            }],
            polygonTool:'',
            zoom: '11',
            // points: [],
            line: '',
            T: '',
            lay: '',
            map: '',
            config: '',
            // iconMaker: [],
            dialog: false,
            dialogTableVisible: false,
            latitude:'',
            longtitude:"",
            form:{},
            list:'',
            urllist:"",
            geocoder:'',
            marker:'',
            lng:'',
            lat:'',
            polygon:'',
            markerTool:'',
            ruleForm:{
                type:'',
            },
            userList:[],
            mapList:[],
            baseList: [],
            imgurl: '',
            videourl: '',
            gdurl:'',
            getshujuUrl: '',
            accessToken:'',
            appKey:'',
            appSecret:'',
          datelist:[],
          numlist:[],
            serial:'',
               tableData1: [],

        };

    },

    computed: {},
    methods: {
      gettime(){
        var newtime = new Date();
        var startTime1 = this.getIncrease(newtime.getFullYear(), 4) + '-' + this.getIncrease(newtime.getMonth()+1, 2) + '-' + this.getIncrease(newtime.getDate(), 2)
        var startTime = this.getIncrease(newtime.getFullYear(), 4)-1 + '-' + this.getIncrease(newtime.getMonth()+1, 2) + '-' + this.getIncrease(newtime.getDate(), 2)
        this.$set(this.Time,0,startTime)
        this.$set(this.Time,1,startTime1)
      },
      getIncrease:function(num, digit){
        var increase = '';
        for(var i = 0; i < digit; i++){
          increase += '0';
        }
        return (increase +num).slice(-digit);
      },
        handleClick(tab, event) {
             console.log(this.activeName)
               //   数据统计
                      axios.get("https://bbgy.cpzsyun.com:82/api/plant/data/count?companyId=" + this.activeName).then((res) =>{
                        // console.log(res)
                          this.plantNum=res.data.data.orderNum,
                         this.orderNum=res.data.data.orderNum,
                           this.ProdNum=res.data.data.ProdNum,
                            this.codeNum=res.data.data.codeNum,
                             this.reapNum=res.data.data.reapNum

            })
                   //   根据公司ID获取基地信息
                      axios.get("https://bbgy.cpzsyun.com:82/api/plant/data/getBaseSoil?companyId=" + this.activeName).then((res) =>{
                        // console.log(res)

            })
        },
        handleClick1(){
 if (tab.label == '基地1') {
            } else if (tab.label == '基地2') {
                // this.init2();
            }
        },
        resetmode() {},
        inqu() {
            this.datelist = []
          this.numlist = []
            this.zztu()
        },
        // 柱状图
        initData() {
            let this_ = this;
            let myEchart = echarts.init(document.getElementById('chart_example'));
            let option = {
                color: ['#3BA1FF'], //柱体颜色
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this_.datelist,
                        axisLine: { show: false }, //轴线不显示
                        axisTick: {
                            alignWithLabel: false
                        },
                        axisLabel: {
                            interval: 0, //底部完整显示
                            textStyle: {
                                //修改底部字体颜色
                                color: '#999999'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        show: true, //隐藏y方向刻度
                        type: 'value',
                        textStyle: {
                            color: '#999999'
                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '50%',
                        data: this_.numlist,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3BA1FF',
                                        fontSize: 8
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            // 绘制图表
            //   this.myChart = this.$echarts.init(this.$refs.Histogram2);

            myEchart.setOption(option);
            //   myChart.setOption(option);
        },
        // 圆形图
        inte() {
            let myEchart = echarts.init(document.getElementById('chart_ex'));
           let option = {
            title: {
    text: '基源/产出物/成品数量',
     left: 20,
     textStyle:{
      fontSize:'14px',
      fontWeight:'400'
    }
  },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right',
                    top: '10%'
                },
                series: [
                    {
                        name: '基源信息',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.typelist
                    }
                ]
            };
            // 绘制图表

            myEchart.setOption(option);
            //   var option1;
        },
        xiangqing() {},
        zhongzi() {
            this.xzid = 1;
        },
        guob() {
            this.xzid = 2;
        },
        shengb() {
            this.xzid = 3;
        },
        // 图表数据
        zztu(){
        var companyId = localStorage.getItem("companyId")
            let data={
                type:this.form1.resourcetype,
                startTime:this.Time[0],
                endTime:this.Time[1],
                name:this.name,
                 companyId:companyId
            }
    axios.post("http://grove.cpzsyun.com:81/api:81/plant/data/getHistogramData",data).then((res) =>{
            // console.log(res)
        var list = res.data.data
        // console.log(list.length)
        for(let m=0;m<list.length;m++){
          // console.log(m)
          var l = list[m]
          // // console.log(l)
          for (const listKey in l) {
            this.datelist.push(listKey)
            this.numlist.push(l[listKey])
          }
        }
      this.initData();
      // console.log(this.datelist)
      // console.log(this.numlist)
    })
       axios.post("http://grove.cpzsyun.com:81/api:81/plant/data/getPieData",data).then((res) =>{
            // console.log(res)
            // this.timms=res.data.data.key
            // this.nums=res.data.data.value
         var arrs = res.data.data
         for (let i = 0; i < arrs.length; i++) {
           arrs[i].value = arrs[i].num
           arrs[i].name = arrs[i].jyName
         }
         this.typelist = arrs
         // console.log(this.typelist)
         this.inte()

                                                })
        },
             getshuju(){
            // datacenter_initjg("").then((res)=>{
            if(this.$util.get("userInfo").userInfo.userType == "GOV"){
                this.dataplane = true
                this.getshujuUrl = "https://bbgy.cpzsyun.com:82/api/plant/basesoil/initjg"
            }else{
                this.getshujuUrl = "https://bbgy.cpzsyun.com:82/api/plant/basesoil/initjgPlant"
            }
            axios.get(this.getshujuUrl).then((res) =>{
                // axios.get("https://bbgy.cpzsyun.com:82/api/plant/basesoil/initjgPlant").then((res) =>{
                this.enterpriseLists = res.data
                var arr1 = []

                for(var a = 0; a<this.enterpriseLists.length;a++){
                    if((this.enterpriseLists[a].basesoildViews).length>0){

                        // //开始    别问我为啥这样写  我也不知道
                        arr1 = this.enterpriseLists[a].basesoildViews
                        var arr2 = []
                        for(var i=0;i<arr1.length;i++){

                            if(arr1[i].type ==2 || arr1[i].type == 3){
                                arr2.push(arr1[i])
                            }

                            this.enterpriseLists[a].arr2 = arr2
                            // console.log(this.enterpriseLists[a].basesoildViews)
                        }
                        // // 结束
                        for(var b = 0;b<this.enterpriseLists[a].arr2.length;b++){
                            this.enterpriseLists[a].arr2[b].abbreviation = this.enterpriseLists[a].arr2[b].name
                        }
                    }
                }
                let initjgData = res.data

                for(let a=0;a<initjgData.length;a++){
                    if(initjgData[a].basesoildViews.length>0){
                        for(let b=0;b<initjgData[a].basesoildViews.length;b++){
                            this.allData.push(initjgData[a].basesoildViews[b])
                        }
                    }
                }
                // console.log(allData)
                let dkData = []
                for(let c=0;c<this.allData.length;c++){
                    if(this.allData[c].type == 1 || this.allData[c].type == 2 || this.allData[c].type == 3 || this.allData[c].type == 4){
                        dkData.push(this.allData[c])
                    }
                    if(this.allData[c].type == 7){
                        //摄像头设备列表
                        this.equipmentList.push(this.allData[c])
                      for (let i = 0; i < this.equipmentList.length; i++) {
                        if(this.equipmentList[i].type == "7"){
                          this.equipmentList[i].type = "摄像头"
                        }

                      }
                    }
                    console.log(this.equipmentList)
                    if(this.allData[c].type == 1){
                        // console.log(allData[c])
                        // console.log()
                        var latlng = JSON.parse(this.allData[c].coordinate)
                        this.latitude = latlng[0].lat
                        this.longtitude = latlng[0].lng
                    }
                }

                // this.mapList = res.data[3].basesoildViews
                if(this.mapList.length>0){
                    var coorlist = JSON.parse(res.data[3].basesoildViews[0].coordinate)
                    var arr=[]
                    for(var j=0;j<coorlist.length;j++){
                        var s = coorlist[j]
                        arr.push(new T.LngLat(parseFloat(s.lng), parseFloat(s.lat)))
                    }
                    this.urllist = arr
                    for (let i = 0; i < this.mapList.length; i++) {
                        var list = [];
                        var newList = [];
                        var list = this.mapList[0].coordinate.split(";");
                        // console.log(list)
                        if(this.mapList[i].type == 1){
                            this.baseList.push(this.mapList[i])
                        }

                        for(var j = 0 ; j< list.length;j++){
                            newList = JSON.parse(list[j])
                            this.longtitude = parseFloat(newList[0].lng)
                            this.latitude = parseFloat(newList[0].lat)
                        }
                    }

                }
                this.mapList = this.allData


                BaiduMap.init()
                    .then((T) => {
                        this.T = T
                        // console.log(T)
                        this.zoom = 14
                        // this.latitude = localStorage.getItem("latitude")
                        this.map = new T.Map('mapDiv')// 初始化地图对象
                        this.map.centerAndZoom(new T.LngLat(this.longtitude,this.latitude), 17)// 设置显示地图的中心点和级别
                        this.map.disableDoubleClickZoom()
                        //创建对象
                        // var ctrl = new T.Control.MapType();
                        //添加控件
                        this.map.addControl(TMAP_HYBRID_MAP);
                        // 创建图片对象
                        var config = {
                            strokeColor:"blue", //折线颜色  s
                            fillColor:"blue",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
                            strokeWeight:"3px", //折线的宽度，以像素为单位
                            strokeOpacity:0.5,  //折线的透明度，取值范围0 - 1
                            fillOpacity:0.5, //填充的透明度，取值范围0 - 1
                            showLabel:true  //是否显示页面，默认为true
                        };
                        this.markerTool = new T.MarkTool(this.map,icon)
                        this.polygonTool = new T.PolygonTool(this.map,config);
                        this.geocoder = new T.Geocoder(this.map)

                        //注册测面工具绘制完成后的事件
                        // type  undefined
                        for(var k=0;k<this.mapList.length;k++){
                            if(this.mapList[k].type == 1 || this.mapList[k].type == 2 || this.mapList[k].type == 3){
                                var con = JSON.parse(this.mapList[k].coordinate)
                                this.polygon = new T.Polygon(con, { color: this.mapList[k].color,fillOpacity:this.mapList[k].diaphaneity / 100,details:this.mapList[k] })
                                this.map.addOverLay(this.polygon)

                                var name = this.mapList[k]
                                var _this = this
                                this.polygon.addEventListener("click",function huoqu(e){
                                    // var _this = this
                                    // _this.details = e.target.options.details
                                })
                                //双击事件
                                this.polygon.addEventListener("dblclick",function handleEdit(e){
                                    // _this.ruleForm = e.target.options.details
                                    // _this.peasantId = _this.ruleForm.peasantName
                                    // _this.principalId = _this.ruleForm.principalName
                                    localStorage.setItem("list",_this.ruleForm.coordinate)

                                    // _this.ruleForm.diaphaneity = Number(_this.ruleForm.diaphaneity)
                                    // _this.dialog = true
                                    _this.flag = 5
                                    _this.productionMassifData = []
                                    _this.productionMassifData = e.target.options.details
                                    var id = _this.productionMassifData.companyId
                                  axios.get("https://bbgy.cpzsyun.com:82/api/plant/company/findById/" + id).then((res) =>{
                                    // this.titleName = res.data.data.name
                                  // })
                                    // company_findById(id).then((res) =>{
                                        _this.productionMassifData.qyName=res.data.data.abbreviation

                                        //地块数据回显
                                        let data = {
                                            soil:_this.productionMassifData.id
                                        }
                                        // axios.post("http://192.168.0.148:8880/plant/plant/soil",data).then((res) =>{
                                        axios.post("https://bbgy.cpzsyun.com:82/api/plant/plant/soil",data).then((res) =>{
                                            _this.dkDAta = res.data.data
                                            for(let a=0;a<_this.dkDAta.length;a++){
                                                // get(a,_this.dkDAta)
                                                var nongshiData ={
                                                    plantId: _this.dkDAta[a].id
                                                }
                                                //地块农事记录
                                                // axios.post("http://192.168.0.148:8880/plant/farm/type",nongshiData).then((res) =>{
                                                axios.post("https://bbgy.cpzsyun.com:82/api/plant/farm/type",nongshiData).then((res) =>{
                                                    _this.dkDAta[a].nongshi = res.data.data
                                                })
                                                var caishouData = {
                                                    plantBatch: _this.dkDAta[a].batch
                                                }
                                                //地块采收记录
                                                // axios.post("http://192.168.0.148:8880/plant/reap/plantBatch",caishouData).then((res) =>{
                                                axios.post("https://bbgy.cpzsyun.com:82/api/plant/reap/plantBatch",caishouData).then((res) =>{
                                                    _this.dkDAta[a].caishouNumber = res.data.data[0]
                                                    _this.dkDAta[a].caishouWeight = res.data.data[1]
                                                })
                                            }
                                            _this.productionMassifData.plantDAta = _this.dkDAta
                                            _this.productionMassifDatas = _this.productionMassifData
                                        })
                                    })
                                })
                            }
                            //摄像头
                            if(this.mapList[k].type == 7){
                                var con = JSON.parse(this.mapList[k].coordinate)
                                var icon = new T.Icon({
                                    iconUrl: 'https://grove.cpzsyun.com:81/re/c.png',
                                    iconSize: new T.Point(19, 27),
                                    iconAnchor: new T.Point(10, 25)
                                })
                                this.marker = new T.Marker(con,{icon:icon,details:this.mapList[k]})
                                // console.log(this.marker)
                                this.map.addOverLay(this.marker)
                                let _this = this
                                this.marker.addEventListener("click",function huoqu(e){
                                    // _this.ruleForm = e.target.options.details
                                    // _this.dialog = true
                                    // console.log(111)
                                    //  _this.dialogTableVisible = true
                                    //  _this.imgurl = _this.$store.state.imageUrls +  e.target.options.details.soilImg
                                    // console.log(_this.dialogTableVisible)
                                })
                                this.marker.addEventListener("dblclick",function huoqu(e){
                                    _this.ruleForm = e.target.options.details
                                    _this.videoFlag = true
                                    // console.log(e)
                                    // var id = "2c9d0ded78c553cd0178c8eeaa000034"
                                    var id = e.target.options.details.id
                                    axios.get("https://bbgy.cpzsyun.com:82/api/plant/dockDevice/getUrl?baseSoilId=" + id).then((res) =>{
                                        // console.log(res)
                                        // if(res.data.data[0]){
                                        // 	_this.videourl = res.data.data[0].rtspHd
                                        // }else{
                                        // 	_this.videourl = 'https://hls01open.ys7.com/openlive/4cd828c7dbcb4a448835eebb51591748.m3u8'
                                        // }
                                        // console.log(_this.videourl)
                                        _this.video(res.data.data[0])
                                    })

                                })
                            }
                            //气象传感
                            if(this.mapList[k].type == 6){
                                var con = JSON.parse(this.mapList[k].coordinate)
                                var icon = new T.Icon({
                                    // iconUrl: 'http://39.96.59.234:8884/re/a.png',
                                    iconUrl: 'https://grove.cpzsyun.com:81/re/a.png',
                                    iconSize: new T.Point(19, 27),
                                    iconAnchor: new T.Point(10, 25)
                                })
                                this.marker = new T.Marker(con,{icon:icon,details:this.mapList[k]})
                                this.map.addOverLay(this.marker)
                                let _this = this
                                this.marker.addEventListener("click",function huoqu(e){
                                    // _this.ruleForm = e.target.options.details
                                    // _this.dialog = true
                                    // console.log(111)
                                    //  _this.dialogTableVisible = true
                                    //  _this.imgurl = _this.$store.state.imageUrls +  e.target.options.details.soilImg
                                    // console.log(_this.dialogTableVisible)
                                })
                                this.marker.addEventListener("dblclick",function huoqu(e){
                                    _this.flag = 7
                                    _this.meteorologicalFlag = true
                                    _this.qixiangDataid = {}
                                    //气象传感数据
                                    let baseSoilId = e.target.options.details.id
                                    // let baseSoilIdss = "2c9d0ded78c553cd0178c90448020048"
                                    _this.historyQxId = e.target.options.details.soilEquipments[0].equipmentId
                                    console.log(e.target.options.details.soilEquipments[0].equipmentId)
                                    axios.get("https://bbgy.cpzsyun.com:82/api/plant//dockDevice/getHistoryData?equId=" + _this.historyQxId).then((res) =>{
                                        // axios.get("https://bbgy.cpzsyun.com:82/api/plant//dockDevice/getHistoryData?equId=" + _this.historyQxId).then((res) =>{
                                        _this.meteorologicalDatas = res.data
                                        console.log(_this.meteorologicalDatas)
                                    })
                                    // let baseSoilId = "2c9d0ded78c553cd0178c91861890063"
                                    // axios.get("https://bbgy.cpzsyun.com:82/api/plant/dockDevice/getNowData?baseSoilId=" + baseSoilId).then((res) =>{
                                    axios.get("https://bbgy.cpzsyun.com:82/api/plant/dockDevice/getNowData?baseSoilId=" + baseSoilId).then((res) =>{
                                        // axios.get("https://bbgy.cpzsyun.com:82/api/plant/dockDevice/findList3Days?baseSoilId=" + baseSoilId).then((res) =>{
                                        // axios.get("https://bbgy.cpzsyun.com:82/api/plant/dockDevice/findList3Days?baseSoilId=" + baseSoilId).then((res) =>{

                                        var qixiangDatas = res.data.data
                                        // console.log(qixiangDatas)
                                        for(let r = 0;r<qixiangDatas.length;r++){
                                            if(qixiangDatas[r].ename == "风速"){
                                                _this.qixiangDataid.windspeed =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "大气温度"){
                                                _this.qixiangDataid.atmosphericTemperature =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "空气温度"){
                                                _this.qixiangDataid.atmosphericTemperature =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "数字气压"){
                                                _this.qixiangDataid.digitalAirPressure =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "大气压"){
                                                _this.qixiangDataid.digitalAirPressure =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "风向"){
                                                _this.qixiangDataid.windDirection =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "土壤温度"){
                                                _this.qixiangDataid.soil =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "土壤湿度"){
                                                _this.qixiangDataid.humidity =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "大气湿度"){
                                                _this.qixiangDataid.atmosphericHumidity =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "太阳总辐射"){
                                                _this.qixiangDataid.totalSolarRadiation =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "辐射累计"){
                                                _this.qixiangDataid.radiationAccumulation =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "雨量"){
                                                _this.qixiangDataid.rainfall =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "降雨量"){
                                                _this.qixiangDataid.rainfall1 =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "雨量累计"){
                                                _this.qixiangDataid.accumulatedRainfall =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "二氧化碳"){
                                                _this.qixiangDataid.Co2 =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "电导率"){
                                                _this.qixiangDataid.conductivity =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }

                                            if(qixiangDatas[r].ename == "pH值"){
                                                _this.qixiangDataid.PHvalue =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                            if(qixiangDatas[r].ename == "土壤PH值"){
                                                _this.qixiangDataid.PHvalue =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                            }
                                          if(qixiangDatas[r].ename == "照度"){
                                            _this.qixiangDataid.Luxvalue =qixiangDatas[r].evalue + qixiangDatas[r].eunit
                                          }
                                        }
                                        _this.qixiangDataids = _this.qixiangDataid
                                    })
                                    // _this.ruleForm = e.target.options.details

                                })
                            }
                            //  this.map.addOverLay(this.marker)
                        }
                    })
            })

        },
             changeOne(data){
            var datas = JSON.parse(data.coordinate)
            var equipmentId = data.id
            this.map.panTo(new T.LngLat(datas[0].lng, datas[0].lat), 18);
            // axios.get("https://bbgy.cpzsyun.com:82/api/plant//dockDevice/getEquByMassifId?massifId=" + equipmentId).then((res) =>{
            axios.get("https://bbgy.cpzsyun.com:82/api/plant/dockDevice/getEquByMassifId?massifId=" + equipmentId + "&type=" + '气象传感').then((res) =>{
                this.equipmentDataAxios = res.data
            })
            this.flag = 7
        },
             tableScroll() {
                    const table = this.$refs.scroll_table;
                        //获取滚动的盒子 这里拿到的是 .el-table__body-wrapper
                    const scroll_box = table.bodyWrapper;
                    this.scrollTimer = setInterval(() => {
                        // 每次滚动一像素
                        scroll_box.scrollTop += 1;
                        if (
                            // 判断是否滚到底部
                            scroll_box.clientHeight + scroll_box.scrollTop + 1 >
                            scroll_box.scrollHeight
                        ) {
                            // 滚到底部后回到顶部
                            scroll_box.scrollTop = 0;
                        }
                        // 时间尽量设短一些,效果比较流畅
                    }, 30);
                },
    },
      components: {
        // videoRight, //视频监控右侧组件
        // environmentRight, //环境监测右侧组件
        // productionRight, //生产监管右侧组件
        // productionMassif, //生产监管右侧地块组件
        // marketRight, // 市场观察右侧组件
        enterpriseList,  //左侧地块导航栏
        // dataPanel,  //数据面板
        // historyMeteorological,  //历史气象
    },
    mounted() {

        // this.inte();
        this.gettime()
      this.zztu()
         setTimeout(this.getshuju(),1000)
           this.tableScroll();
                let that = this;
                // 监听鼠标移动到盒子上清除定时器
                document.querySelector(".scroll_table").addEventListener("mouseenter", function () {
                    clearInterval(that.scrollTimer);
                    // 这里使用false(冒泡)
                }, false);
                //  鼠标离开时再次执行函数
                document.querySelector(".scroll_table").addEventListener("mouseleave", function () {
                    that.tableScroll();
                }, false);
                // 获取指定政管下的所有种植公司
      var companyId = localStorage.getItem("companyId")
      // let ds = "companyId=" + companyId
      // getplantcomp(ds).then((res)=>{
      //   this.gslist=res.data.data
      //   this.activeName=this.gslist[0].id
      // })


           axios.get("http://grove.cpzsyun.com:81/api:81/plant/data/getPlantComp?companyId=" + companyId).then((res) =>{
              console.log(res)
              this.gslist=res.data.data
              this.activeName=this.gslist[0].id
            })
            //   数据统计
            setTimeout(axios.get("http://grove.cpzsyun.com:81/api:81/plant/data/count?companyId=" + companyId).then((res) =>{
                        // console.log(res)
                         this.plantNum=res.data.data.orderNum,
                         this.orderNum=res.data.data.orderNum,
                           this.ProdNum=res.data.data.ProdNum,
                            this.codeNum=res.data.data.codeNum,
                             this.reapNum=res.data.data.reapNum

            }),2000)
            // let companyId = localStorage.getItem("companyId")
               //   根据公司ID获取基地信息
                setTimeout(axios.get("http://grove.cpzsyun.com:81/api:81/plant/data/getBaseSoil?companyId=" + "2c9d0ded78ab48d70178ab81c6b1000b").then((res) =>{
                       this.jidilist=res.data.data
                        // console.log(res)
            }),2000)
          //  192.168.0.143:8880/plant/data/getDev?baseSoilId=2c9d0ded78c553cd0178c926bbab006e
                setTimeout(axios.get("http://grove.cpzsyun.com:81/api:81/plant/data/getDev?baseSoilId=" + '2c9d0ded78c553cd0178c926bbab006e').then((res) =>{
                    //    this.jidilist=res.data.data
                    //     console.log(res)
            }),2000)
    },
    created() {},
    watch: {
        dkData() {}
    }
};
</script>
<style scoped lang="less">
.main {
    /* position:relative; */
    width: 100%;
    /* height: auto; */
    overflow-y: scroll;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main_top {
    width: 98%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    /* padding: 20px; */
}
.main_top /deep/ .el-tabs__header {
    padding: 0px 0px 0px 12px !important;
}
.tabs_top {
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 12px;
}
.tabs_top_le {
    width: 6px;
    height: 20px;
    background: #409eff;
    margin-right: 6px;
}
.tabs_top_text {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0c131b;
}
.tabs_list {
    width: 100%;
    /* height: ; */
    display: flex;
    flex-direction: row;
    margin-left: 15px;
    margin-top: 20px;
}
.tabs_list_cen {
    width: 140px;
    height: 70px;
    display: flex;
    flex-direction: column;
    margin-right: 88px;
    margin-left: 20px;
}
.tabs_list_cen_tle {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
}
.tabs_list_cen_sj {
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 20px;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #0c131b;
    margin-top: 12px;
}
.tabs_list_cen_sj_img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
.center {
    width: 98%;
    height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
}
.center_le {
    width: 49%;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}
.center_rig {
    width: 49%;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;

}
.main_ec_top {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    // border-bottom: 1px solid #ccc;
}
.main_ec_top/deep/.el-input--small .el-input__inner {
    height: 40px !important;
    line-height: 40px !important;
}
.center_left {
    width: 100%;
    min-height: 300px;
    height: auto;
}
.center_left_top {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.center_le_bon {
    width: 100%;
}
.right_top {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.right_top_text {
    font-size: 16px;
    font-weight: 700;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.right_top_dit {
    width: 80px;
    height: 36px;
    font-size: 14px;
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}
.top_dit {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    margin-right: 20px;
}
.selectedColor {
    color: #1890ff;
    font-weight: 700;
}
.center_rig_map{
    width: 98%;
    height: 430px;

}
.mapDiv{
    width: 100%;
    height: 100%;
    z-index:0;
}
.left{
       height: 430px;
    position: absolute;
    top:0;
    left: 0;
}
.center_rig_bon{
    width: 98%;
    height: 270px;
    margin-top: 20px;
}
.center_rig /deep/ .el-tabs__header {
    padding: 10px 10px 0px 12px !important;
}
.center_rig /deep/ .el-tab-pane{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.center_rig_bon/deep/.cell{
    font-size: 14px;
color: #000;
}
</style>
